<!--查看详情-->
<template>
  <el-drawer
    size="50%"
    title="查看参与信息"
    :visible="visible"
    @close="updateVisible(false)">
    <div class="fontsize sticky">{{detailInfo.largeScreenName}}</div>
    <el-row class="row-cls">
      <el-col :xs="8" :sm="8" :lg="8" :xl="8" v-for="(i,j) in list" :key="j">
        <div class="flex-column screen-num">
          <span>{{i.text}}</span>
          <div>{{i.num}}</div>
        </div>
      </el-col>
    </el-row>
    <div class="flex-columns">
      <div class="fit-fontsize flex-align-center"><div class="blue-piece"></div>中奖人员{{detailInfo.largeScreenWinners.length}}人：</div>
      <el-scrollbar
        v-if="detailInfo.largeScreenWinners.length>0"
        :style="detailInfo.largeScreenWinners.length<=6 ? 'height: 80px' : detailInfo.largeScreenWinners.length<=12 ? 'height: 160px' : 'height: 230px'"
        wrapStyle="overflow-x: hidden;"
      >

        <div class="flex-wrap m-left">
          <div v-for="(i,j) in detailInfo.largeScreenWinners" :key="j" class="winner-list flex-column">
            <img :src="i.headSculpture" />
            <!--dark-->
            <el-tooltip class="item" effect="light" :content="i.nickname" placement="top">
                <div class="font-overflow line-height20 default">{{i.nickname}}</div>
            </el-tooltip>
          </div>
        </div>

      </el-scrollbar>
      <div class="m-left" v-else>暂无中奖人员</div>
    </div>
    <div class="flex-columns">
      <div class="fit-fontsize flex-align-center"><div class="blue-piece"></div>大屏规则：{{detailInfo.largeScreenRules.length}}</div>
      <el-scrollbar
        v-if="detailInfo.largeScreenRules.length>500"
        style="height: 300px"
        wrapStyle="overflow-x: hidden;"
      >
      <div class="m-left" v-html="detailInfo.largeScreenRules"></div>
      </el-scrollbar>
      <div class="m-left" v-html="detailInfo.largeScreenRules" v-else></div>
    </div>
    <div class="flex-columns">
      <div class="fit-fontsize flex-align-center"><div class="blue-piece"></div>参与人员{{detailInfo.largeScreenChecks.length}}人：</div>
      <!--<el-scrollbar
        v-if="detailInfo.largeScreenChecks.length>0"
        :style="detailInfo.largeScreenChecks.length<=6 ? 'height: 80px' : detailInfo.largeScreenChecks.length<=12 ? 'height: 160px' : 'height: 230px'"
        wrapStyle="overflow-x: hidden;"
      >
        <div class="flex-wrap m-left">
          <div v-for="(i,j) in detailInfo.largeScreenChecks" :key="j" class="winner-list flex-column">
            <img :src="i.headSculpture" />
            <el-tooltip class="item" effect="light" :content="i.nickname" placement="top">
              <div class="font-overflow line-height20 default">{{i.nickname}}</div>
            </el-tooltip>
            <div class="font-overflow line-height20 default">曝光量：{{i.bgCount}}</div>
            <div class="font-overflow line-height20 default">点赞量：{{i.dzCount}}</div>
            <div class="font-overflow line-height20 default">评论量：{{i.plCount}}</div>
          </div>
        </div>
      </el-scrollbar>-->
        <ele-pro-table
          :toolbar="false"
          v-if="detailInfo.largeScreenChecks.length>0"
          style="margin: 0 20px 20px"
          ref="table"
          size="mini"
          :columns="columns"
          :datasource="datasource"
          :need-page="true"
          :hideOnSinglePage="false"
        >
          <!--发布渠道-->
          <template v-slot:head="{ row }">
            <img class="winner-img" :src="row.headSculpture"/>
          </template>
        </ele-pro-table>
      <div class="m-left p-bottom20" v-else>暂无参与人员</div>


    </div>
  </el-drawer>
</template>

<script>
  import {lookScreenDetail, screenChckPage} from "@/api/explosiveCode/largeScreenLottery";

  export default {
    name: "look-detail",
    props:{
      visible:Boolean
    },
    data(){
      return{
        // 表格列配置
        columns: [
          {
            prop: 'headSculpture',
            label: '头像',
            align: 'center',
            width:209,
            slot: 'head',
            showOverflowTooltip: true
          },
          {
            prop: 'nickname',
            label: '昵称',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            content: "---",
            prop: 'bgCount',
            label: '曝光量',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'dzCount',
            label: '点赞量',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'plCount',
            label: '评论量',
            align: 'center',
            showOverflowTooltip: true
          },
        ],
        detailInfo:{},
        list:[
          {
            text:'曝光量',
            num:0
          },{
            text:'点赞数',
            num:0
          },{
            text:'评论数',
            num:0
          },
        ],
        // 大屏id
        screenId:null
      }
    },
    methods:{
      show(id){
        this.screenId=id
        // 根据id查询详情
        lookScreenDetail({
          id:id
        })
          .then((data) => {
            this.detailInfo=data
            console.log('查询id',data)
          })
          .catch((e) => {
            this.$message.error(e);
          });
        this.$nextTick(()=>{
          this.reload()
        })
      },
      /* 刷新————表格数据源 */
      datasource({ page, limit, where, order }) {
        return screenChckPage({ ...where, ...order, page, limit:5,
          id:this.screenId
        });
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where: where });
      },
      /* 更新 visible */
      updateVisible(value) {
        this.$emit('update:visible', value);
      },
    }
  }
</script>

<style scoped lang="less">
  /*设置单元格为空时，默认值*/
  /deep/ .el-table .el-table__body td .cell:empty::after{
    content: "0";
  }
   /*粘性定位*/
  .sticky{
    background-color: #FFFFFF;
    z-index: 9;
    position: sticky;
    position: -webkit-sticky;
    top: 0px;
    padding-bottom: 15px !important;
  }
  .row-cls{
    padding : 35px 0px 0
  }
  .screen-num{
    span{
      color: #666;
    }
    div{
      color: #1E6CEB;
      font-size: 24px;
      margin-top: 10px;
    }
  }

  .fontsize,.fit-fontsize{
    font-weight: bold;
    color: #000;
  }
  .fontsize{
    font-size: 16px;
    padding: 30px 20px 0;
  }
  .fit-fontsize{
    font-size: 14px;
    padding: 50px 20px 20px;
  }
  .blue-piece{
    background-color: #0C91F3;
    width: 5px;
    height: 20px;
    margin-right: 10px;
  }
  .m-left{
    margin:0 45px;
  }
  .winner-img{
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-bottom: 5px;
  }
  .winner-list{
    margin-top: 10px;
    padding: 0 5px;
    width: 73px;
    div{
      text-align: center;
      width: 73px;
    }
    img{
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-bottom: 5px;
    }
  }
</style>
